<template>
    <div class="box">
        <div class="title pa-20">
            <p><i><img src="@/assets/images/icon-status.png"></i>{{status}}</p>
            <span>时间：{{date}}</span>
        </div>
        <div class="request-box  pa-l-r-20" v-if=" status === '退款申请中'">
            <p>您已成功发起退款申请，请耐心等待商家处理。
            </p>
            <div class="prompt-box">
                商家同意，系统将退款给您。<br>
                如果商家拒绝，您可以修改退款申请后再次发起，商家会重新处理。
            </div>
            <div class="link-box">
                <button @click="refundShow = true">修改申请</button>
                <button @click="revoke">撤销申请</button>
            </div>
        </div>
        <div v-else class="refund-info pa-l-r-20">
            <div class="refund-title">
                <h6>退货信息</h6>
                <p>(请将商品退还至以下地址，商家收到货后会给您退款)</p>
            </div>
            <div class="business-info">
                <p>收货人：{{businessInfo.name}}</p>
                <p>电话：{{businessInfo.phone}}</p>
                <p>退货地址：{{businessInfo.address}}</p>
            </div>
            <div class="btn-box" v-if="status === '卖家已退款'">
                <span>退款成功</span>
                <button @click="revoke">撤销申请</button>
            </div>
            <div class="btn-box" v-else>
                <button>已退货，填写物流信息</button>
                <button @click="revoke">撤销申请</button>
            </div>
        </div>
        <div class="gray-box"></div>
        <div class="goods-box pa-l-r-20">
            <h4>退款信息</h4>
            <div class="details-box">
                <i><img :src="goodsDetails.img"></i>
                <div>
                    <div class="multi-line">
                        {{goodsDetails.name}}
                    </div>
                    <div class="price">
                        <p>×{{goodsDetails.amount}}</p>
                        <span>¥<b>{{goodsDetails.amount * goodsDetails.price}}</b></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="pa-l-r-20 cost-box">
            <div class="list-box">
                <label>退款原因</label>
                <span class="multi-line">{{refundInfo.reason}}</span>
            </div>
            <div class="list-box">
                <label>退款金额</label>
                <span>¥{{refundInfo.sum}}</span>
            </div>
            <div class="list-box">
                <label>申请时间</label>
                <span>¥{{refundInfo.time}}</span>
            </div>
            <div class="list-box">
                <label>订单编号</label>
                <span>{{refundInfo.orderNum}}</span>
            </div>
            <div class="list-box">
                <label>退款编号</label>
                <span>¥{{refundInfo.refundNum}}</span>
            </div>
       </div>
        <van-popup v-model="refundShow">
            <div class="pop-box">
                <p>退款申请</p>
                <textarea placeholder="请填写退款申请" v-model="newReason" maxlength="500"></textarea>
                <div>
                    <button @click="submit">提交</button>
                    <button @click="refundShow = false">取消</button>
                </div>
            </div>
        </van-popup>
        <van-popup v-model="logisticsShow">
            <div class="pop-box">
                <p>退款申请</p>
                <div class="label-box">
                    <label for="">物流公司</label>
                    <input type="text" placeholder="请输入物流公司名称">
                </div>
                <div class="label-box last">
                    <label for="">物流公司</label>
                    <input type="text" placeholder="请输入物流公司名称">
                </div>
                <div>
                    <button @click="submit">提交</button>
                    <button @click="refundShow = false">取消</button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import img from '@/assets/temporary/index200.png'
    export default {
        name: "details",

        data(){
            return{
                status:'卖家已同意，请尽快退货',//状态
                date:'2019-12-20  12:25:23',//
                phone:'15178941234',//
                userName:'王小明',
                address:'郑州市中原区国家大学科技园西区1楼12楼1008室',
                goodsDetails:{img,name:"郑州方特欢乐世界门票/大门票（电子票-出票超级...",price:56,amount:1,freight:0},//商品信息
                order:{number:'2019121828691231',time:'2019-12-18  12:15:36'},//订单信息
                refundInfo:{ reason:`买多了，不想要了，下次需要了再买`,sum:'260',time:'2019-12-19  08:15:36',orderNum:'2019121828691231',refundNum:'2019121828691221'},//退款信息
                refundShow: false,//修改原因弹窗显示
                newReason:'',
                businessInfo:{name:'张明',phone:1501424881,address:'河南省郑州市中原区中原路33号'},//商家信息
                logisticsShow:false,//填写物流
            }
        },
        methods:{
            revoke(){
                this.$dialog.confirm({
                    message: '是否确认撤销申请退款'
                }).then(() => {
                    // on confirm
                }).catch(() => {
                    // on cancel
                });
            },
            submit(){
            //    提交新的原因
                let reason = this.newReason.trim()
                this.refundInfo.reason = reason
                this.refundShow = false
                this.newReason = ''
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "@/assets/css/public";
    .box{
        padding-bottom: vw(120);
        background-color: $gray_bg;
        h4{
            height: vw(80);
            line-height: vw(80);
            font-weight: normal;
            font-size: vw(32);
            border-bottom: 1px solid $gray_bg;
        }
        .title{
            font-size: vw(24);
            color: #fff;
            background-color: $green;
            p{
                display: flex;
                align-items: center;
                margin-bottom: vw(20);
                font-size: vw(30);
                i{
                    width: vw(38);
                    margin-right: vw(30);
                }
            }
        }
        .request-box {
            background-color: #ffffff;
           >p{
               height: vw(80);
               line-height: vw(80);
           }
            .prompt-box{
                padding: vw(20) 0;
                line-height: vw(40);
                color: #999;
                border-top: 1px solid $gray_bg;
            }
            .link-box {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                height: vw(110);
                border-top: 1px solid $gray_bg;
                button{
                    width:vw(180);
                    height:vw(60);
                    border:1px solid $green;
                    border-radius:vw(30);
                    color: $green;
                    background-color: transparent;
                    &:first-child{
                        color: #999;
                        border-color: #ccc;
                        margin-right: vw(40);
                    }
                }
            }
        }

        .refund-info {
            background-color: #fff;
            .refund-title{
                padding: vw(12) 0;
                color: #999;
                font-size: vw(24);
                h6{
                    margin-bottom: vw(10);
                    font-size: vw(32);
                    font-weight: normal;
                }
            }
            .business-info{
                padding: vw( 20) 0;
                font-size: vw(28);
                color: #333;
                border-top: 1px solid $gray_bg;
                p{
                    padding-bottom: vw(10);
                }
            }
            .btn-box{
                display: flex;
                align-items: center;
                justify-content: flex-end;
                height: vw(110);
                border-top: 1px solid $gray_bg;
                button{
                    min-width:vw(180);
                    height:vw(60);
                    padding: 0 vw(35);
                    border:1px solid $green;
                    border-radius:vw(30);
                    color: $green;
                    background-color: transparent;
                    &:first-child{
                        color: #999;
                        border-color: #ccc;
                        margin-right: vw(40);
                    }
                }
                span{
                    color: #999;
                    border-color: #ccc;
                    margin-right: vw(40);
                }
            }
        }
        .goods-box {

            background-color: #fff;
            .details-box {
                display: flex;
                padding: vw(20) 0 vw(38);
                i{
                    width: vw(200);
                }
                >div{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding:0 vw(10) 0 vw(20);
                    .multi-line {
                        line-height: vw(42);
                        -webkit-line-clamp: 2;
                    }
                    .price {
                        text-align: right;
                        b{
                            font-weight: normal;
                            font-size: vw(36);
                        }
                    }
                }
            }
        }
        .cost-box {
            background-color: #fff;
            border-top: 1px solid $gray_bg;
            padding-top: vw(20);
            padding-bottom: vw(20);
        }
        .list-box {
            display: flex;
            justify-content: space-between;
            padding: vw(16) 0;
            color: #999;
            span{
                max-width: vw(340);
                text-align: right;
                -webkit-line-clamp: 3;
            }
        }
        .total{
            height: vw(100);
            line-height: vw(100);
            text-align: right;
            border-top: 1px solid $gray_bg;
            span{
                font-size: vw(36);
            }
        }
    }
    .pop-box {
        display: flex;
        flex-direction: column;
        width:vw(600);
        height:vw(480);
        padding: vw(12) vw(50);
        background:rgba(255,255,255,1);
        border-radius:vw(10);
        >p{
            height: vw(100);
            line-height: vw(100);
            text-align: center;
            font-weight: bold;
            font-size: vw(36);
        }
        textarea{
            width:vw(500);
            height:vw(240);
            padding: vw(10);
            background:rgba(247,247,247,1);
            border: 0;
        }
        div{
            flex: 1;
            display: flex;
            align-items: center;
            &.label-box{
                height: vw(90);
                color: #333;
                font-size: vw(28);
                border-bottom: 1px solid $gray_bg;

                input{
                    flex: 1;
                    padding:0 vw(20);
                }
            }
            &.last{
                margin-bottom: vw(50);
            }
            button{
                width:vw(180);
                height:vw(60);
                border:1px solid $green;
                border-radius:vw(30);
                color: $green;
                background-color: #fff;
                margin: 0 vw(30);
                &:last-of-type{
                    color: #999999;
                    border-color: #ccc;
                }
            }
        }
    }

</style>